<template>
    <div class="login-form">
        <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field
            v-model="registerForm.userAccount"
            name="userAccount"
            label="账号"
            placeholder="请输入账号"
            :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
            v-model="registerForm.nickName"
            name="nickName"
            label="昵称"
            placeholder="请输入账昵称"
            :rules="[{ required: true, message: '请填写昵称' }]"
            />
            <van-field
            v-model="registerForm.userPassword"
            type="password"
            name="密码"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
            />
            <van-field
            v-model="registerForm.checkPassword"
            type="password"
            name="检查密码"
            label="检查密码"
            placeholder="请再次输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
            />
            <van-field
            v-model="registerForm.profile"
            rows="2"
            autosize
            label="个人简介"
            type="textarea"
            maxlength="512"
            placeholder="请输入个人简介"
            show-word-limit
            />
            <van-field
            v-model="registerForm.userEmail"
            type="userEmail"
            name="邮箱"
            label="邮箱"
            placeholder="请输入邮箱"
            :rules="[{ required: true, message: '请填写邮箱' }]"
            />
            <van-divider content-position="left">已选标签</van-divider>
            <div v-if="TagIds.length===0">
                请选择标签
            </div>
            <van-row gutter="20" style="padding: 0 16px;">
                <van-col v-for="tag in TagIds" :key="tag" >
                    <van-tag closeable size="medium" type="primary" @close="close(tag)">
                        {{ tag }}
                    </van-tag>
                </van-col>
            </van-row>
        
            <van-divider content-position="left">选择标签</van-divider>
            <van-tree-select 
            v-model:active-id="TagIds" 
            v-model:main-active-index="TagIndex"
            :items="Tagitems"
            />
        </van-cell-group>
        <van-button class="register-button" round block type="primary" native-type="submit">
                 注册
        </van-button>
        </van-form>
    </div>
</template>

<style scoped>
#login-form {
    margin-top: 20px;
    justify-content: center;
    align-items: center;
    height: 200vh; /* 使容器高度占满整个视口 */
    width: 100%;
    margin-bottom: 100px;
}

#login-form .van-form {
    padding: 30px 10px;
    width: 100%; 
    max-width: 400px; 
}

.register-button {
    position: fixed;
    bottom: 50px; /* 距离底部20px */
    right: 20px; /* 距离右边20px */
    width: 100px; /* 按钮宽度 */
}
</style>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { showFailToast, showSuccessToast } from 'vant';
import Myaxios from '../plugins/MyAxios';

const router = useRouter();
const tagsList = ref([])
const registerForm = reactive({
  avatarUrl: "https://xxx.com",
  checkPassword: "",
  nickName: "",
  profile: "",
  tags: [],
  userAccount: "",
  userEmail: "",
  userPassword: ""
})
const TagIds = ref([]);
const TagIndex = ref();
const originalTagItems = [
    {
        text: '性别',
        children: [
            { text: '男', id: '男' },
            { text: '女', id: '女' },
            { text: '男1', id: '男1' },
            { text: '女2', id: '女2' },
        ],
    },
        {
        text: '年级',
        children: [
            { text: '大一', id: '大一' },
            { text: '大二', id: '大二' },
            { text: '大三', id: '大三' },
            { text: '大1', id: '大1' },
            { text: '大2', id: '大2' },
            { text: '大3', id: '大3' },
        ],
    },
]
let Tagitems = ref(originalTagItems);

onMounted( async () => {
    const res = await Myaxios.post("/listTags");
    if(res.data.code === 200){
         // 清空 originalTagItems
         originalTagItems.length = 0;

        // 将接口返回的标签信息加入 originalTagItems
        const tags = res.data.data; // 假设这是返回的标签数组
        tags.forEach(tag => {
            originalTagItems.push({
                text: tag.parentTagName,
                children: tag.childrenTagsName.map(child => ({ text: child, id: child }))
            });
        });

        // 更新 Tagitems
        Tagitems.value = [...originalTagItems];
    }
    else{
        showFailToast("系统繁忙，请稍后重试");
    }
})

const onCancel = () => {
    searchText.value = "";
    Tagitems.value = originalTagItems;
};
const close = (tag) => {
    TagIds.value = TagIds.value.filter((item) => {
        return item !== tag
    })
};

const onSubmit = async () => {
    registerForm.tags = TagIds.value
    const res = await Myaxios.post("/register", registerForm);
    if(res.data.code === 200){
        showSuccessToast("注册成功")
        router.push({
            path:'/index',
            replace: true
        })
    }else{
        showFailToast("注册失败," + res.data.message)
    }
};
</script>
